<template>
	<!-- 导航栏区域 -->
	<uni-nav-bar fixed="true" left-icon="search" color="pink" left-text="搜索..." title="Toy优选" right-icon="redo-filled">
	</uni-nav-bar>
	<!-- 轮播图区域 -->
	<uni-swiper-dot :info="info" :current="current" field="资源暂时找不到了,请尝试刷新页面试试..." :mode="mode">
		<swiper @change="change" circular="true" autoplay="true" previous-margin="40rpx" next-margin="40rpx">
			<swiper-item v-for="(item ,index) in info" :key="index">
				<image :src="item.content" :mode="item.mode" fade-show="true"></image>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
	<!-- 主体区域 -->
	<view class="content">
		<!-- 标签区域 -->
		<view style="display: flex;justify-content: space-around;color: blue;">
			<uni-tag text="隐私保证" type="primary" size="small" inverted="true" :circle="true"></uni-tag>
			<uni-tag text="正品保障" type="primary" size="small" inverted="true" :circle="true"></uni-tag>
			<uni-tag text="严选平台" type="primary" size="small" inverted="true" :circle="true"></uni-tag>
			<uni-tag text="售后无忧" type="primary" size="small" inverted="true" :circle="true"></uni-tag>
		</view>
		<!-- 通知栏 -->
		<uni-notice-bar showIcon scrollable="true" single="true"
			text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏" showClose></uni-notice-bar>
		<!-- 分类推荐区域 -->
		<Card cardTitle="限时秒杀"></Card>
		<view>
			<uni-grid :column="4" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;padding: 10rpx;">
						<cover-image src="../../static/c3.png"></cover-image>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<Card cardTitle="精品推荐"></Card>
		<TuiJian></TuiJian>
		
		<Card cardTitle="猜你喜欢"></Card>
		<uni-list>
			<uni-grid :column="2" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
					<image mode="aspectFit" style="display: block;width: 100%;height: 100%;" src="../../static/logo.png"></image>
					<view class="grid-item-box" style="background-color: #fff;">
						<text class="uni-body">爱国者realme真我GT钢化</text>
						<view>
							<icon type="success"></icon><text>先用后付</text>
						</view>
						<view style="width: 100%;">
							<text style="color: red;font: 0.9em sans-serif;">新客￥{{price}} 已售{{sum}}+件</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-list>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: 100,
				sum: 100000,
				// 轮播图列表
				info: [{ 
						content: 'https://pic.3gbizhi.com/uploadmark/20240429/4c70c1db900629a324d441893ee8fbde.png',
						mode: "heightFix"
					}, {
						content: 'https://pic.3gbizhi.com/uploadmark/20231104/a125254f8dadcf9a125da40a74dd8436.jpg',
						mode: "heightFix"
					},
					{
						content: 'https://pic.3gbizhi.com/uploadmark/20240205/12df95705b58a3f3aed9af3592cb2396.jpg',
						mode: "heightFix"
					}
				],
				current: 0,
				mode: 'round'
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
				if (e.detail.current == 3) {
					this.current = 0
				}
			}
		},
		components: {

		}
	}
</script>

<style>
</style>